<template>
    <span class="displayFlex text-right flex-algin-center" v-if="countMsg && Object.keys(countMsg).length > 0">
        <span class="input-btn" :class="{'disabled':countMsg.disabled}" @click="reduceNum">-</span>
        <input class="input-number" v-model="inputNumber" type="number">
        <span class="input-btn" :class="{'disabled':countMsg.disabled}" @click="addNum">+</span>
    </span>
</template>

<script>
    export default {
        name: "Count",
        props:{
            countNumProp:Number,
            countProp:Object
        },
        data(){
            return{
                inputNumber:1,
                countMsg:{
                    // maxLimit:{
                    //     isLimit:true,//是否打开最大限制
                    //     num:5,//最大限制的数量
                    //     text:'此商品限购5件',//toast的提示
                    //     showTime:1000,//显示消失的时间
                    // },
                    // minLimit:{
                    //     isLimit:true,
                    //     num:1,
                    //     text:'最低选一件商品',
                    //     showTime:1000,
                    // }
                    // storeId:0,//店铺id
                    // itemId:0,//商品id
                    // disabled:false//库存满了不能点击，或者
                }
            }
        },
        mounted(){
            this.inputNumber =this.countNumProp ;
            this.countMsg =Object.assign({},this.countMsg,this.countProp) ;
        },
        methods:{
            reduceNum(){
                let that = this;
                if(this.inputNumber > (this.countMsg.minLimit.num || 1)){
                    this.inputNumber--;
                }else{
                    this.$root.$emit('toast',{msg:that.countMsg.minLimit.text,showTime:that.countMsg.minLimit.showTime});
                }
            },
            addNum(){
                let that = this;
                if( this.countMsg.maxLimit.isLimit ){
                    if( this.countMsg.maxLimit.num  <= this.inputNumber){
                        this.$root.$emit('toast',{msg:that.countMsg.maxLimit.text,showTime:that.countMsg.maxLimit.showTime});
                        return
                    }
                    this.inputNumber++
                }
            }
        },
        watch:{
            inputNumber(val){
                this.$emit('changeInputNumber',val,this.countMsg.storeId,this.countMsg.itemId);
            },
            countNumProp(val){
                this.inputNumber = val ;
            },
            countProp(val){
                this.countMsg =Object.assign({},this.countMsg,val) ;
            }
        }
    }
</script>

<style scoped>
    .input-btn{
        display: inline-block;
        border: 1px solid #666;
        border-radius: 50%;
        width: .22rem;
        height: .22rem;
        font-size: .18rem;
        line-height: .2rem;
        text-align: center;
        font-weight: 100;
    }
    .input-number{
        border: 1px solid #666;
        background-color: #F0F0F0;
        color: #000000;
        font-size: .14rem;
        border-radius: .05rem;
        text-align: center;
        width: .4rem;
        height: .27rem;
        line-height: .27rem;
        margin: 0 .1rem;
    }
</style>